﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title>流程详情</title>
    <link href="../lib/layui/css/layui.min.css" rel="stylesheet" />
    <link href="../x-admin/css/font.css" rel="stylesheet" />
    <link href="../x-admin/css/xadmin.css" rel="stylesheet" />
    <script type="text/javascript" src="../lib/Base64/base64.min.js"></script>
    <script type="text/javascript" src="../linq.js/linq.js"></script>
    <script src="../lib/cookie/cookie.js"></script>
    <script src="../lib/signalr/signalr.js"></script>
    <script src="../lib/signalr/menutree.js"></script>
    <style>
        .unoperate {
            display: none;
        }
    </style>
</head>

<body style="background-color:#eeeeee">
    <div class="layui-card" style="margin-left:0px">
        <div class="layui-card-body ">
            <form class="layui-form layui-col-space5" name="processForm" id="processForm" lay-filter="processForm">
                <div class="layui-input-inline layui-show-xs-block">
                    <input class="layui-input" placeholder="卷宗名(支持模糊匹配)" name="fname" id="fname">
                </div>
                <div class="layui-input-inline layui-show-xs-block">
                    <input class="layui-input" placeholder="备注(支持模糊匹配)" name="note" id="note">
                </div>
                <div class="layui-input-inline layui-show-xs-block">
                    <button class="layui-btn" type="button" lay-submit id="sreach" lay-filter="sreach">
                        <i class="layui-icon">&#xe615;</i>
                    </button>
                </div>
            </form>
        </div>
        <div class="layui-card-header operateBtn unoperate">
            <button class="layui-btn operateBtn unoperate" type="button" onclick="addProcessFile(this)">
                <i class="layui-icon"></i>添加数据源
            </button>
        </div>
        <div class="layui-card-body" style="">
            <table class="layui-hide" id="processtab" lay-filter="processtab"></table>
        </div>
    </div>
    <script type="text/html" id="sourcetoolbar">
        <a title="删除" class="operateBtn" href="javascript:;" lay-event="delsource" data-path="{{ d.path }}">
            <i class="layui-icon">&#xe640;</i>删除
        </a>
    </script>
    <script type="text/html" id="barhandle">
        <a id="" title="查看" href="javascript:;" lay-event="detail">
            <i class="layui-icon">&#xe63c;</i>查看
        </a>
        <a title="删除" class="operateBtn" href="javascript:;" lay-event="delfile" data-path="{{ d.path }}">
            <i class="layui-icon">&#xe640;</i>删除
        </a>
        <a title="下载" class="operateBtn" href="javascript:;" lay-event="downloadfile" data-path="{{ d.path }}" data-name="{{ d.name }}">
            <i class="layui-icon">&#xe601;</i>下载
        </a>
    </script>
    <script src="../lib/layui/layui.js"></script>
    <script type="text/javascript">
        function getrequest() {
            var url = location.search; //获取url中"?"符后的字串
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                }
            }
            layui.jquery("#parentpath").html(theRequest.dir);
            return theRequest;
        }

        layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'element', 'slider'],
            function () {
                var table = layui.table //表格
                //执行一个 table 实例
                $tab = table.render({
                    elem: '#processtab',
                    headers: {
                        user: getCookie("userinfo"),
                        version: getCookie("version")
                    },
                    url: localStorage.getItem('hosttingaddr') + "/Manager/ProcessCfgFile/Index?dir=" + getrequest().dir, //数据接口
                    title: '卷宗流程信息表',
                    page: true, //开启分页
                    cols: [[ //表头
                        {
                            field: 'name',
                            title: '卷宗名称',
                            align: 'center',
                            event: 'collapse',
                            templet: function (d) {
                                return '<div style="position: relative;\n' + '    padding: 0 10px 0 20px;">' + d.name + '<i style="left: 0px;" lay-tips="展开" class="layui-icon layui-colla-icon layui-icon-right"></i></div>'
                            }
                        },
                        {
                            field: 'note',
                            title: '备注',
                            align: 'center',
                            sort: false
                        },
                        {
                            field: 'parentPath',
                            title: '文件路径',
                            align: 'center',
                            sort: false
                        },
                        {
                            type: 'space',
                            width: 120,
                            title: '操作',
                            align: 'center',
                            toolbar: '#sourcetoolbar'
                        }]],
                    where: getWhere(),
                    done: function (res) {
                        if (res.isOperate != 1) {
                            layui.$(".operateBtn").addClass("unoperate");
                        }
                        else {
                            layui.$(".operateBtn").removeClass("unoperate");
                        }
                    }
                });
                function getWhere() {
                    var where = layui.form.val("processForm");
                    return where;
                }
                //监听工具条
                table.on('tool(processtab)',
                    function (obj) {
                        var data = obj.data;
                        if (obj.event === 'collapse') {
                            var trObj = layui.$(this).parent('tr'); //当前行
                            var accordion = true //开启手风琴，那么在进行折叠操作时，始终只会展现当前展开的表格。
                            var content = '<table></table>' //内容
                            //表格行折叠方法
                            collapseTable({
                                elem: trObj,
                                accordion: accordion,
                                content: content,
                                success: function (trObjChildren, index) { //成功回调函数
                                    //trObjChildren 展开tr层DOM
                                    //index 当前层索引
                                    trObjChildren.find('table').attr("id", index);
                                    table.render({
                                        elem: "#" + index,
                                        headers: {
                                            user: getCookie("userinfo"),
                                            version: getCookie("version")
                                        },
                                        url: localStorage.getItem('hosttingaddr') + "/Manager/ProcessCfgFile/procefile?dir=" + data['parentPath'] + '&curdir=' + data['name'], //数据接口
                                        ////limit: 3,
                                        //cellMinWidth: 80,
                                        cols: [[
                                            {
                                                field: 'name',
                                                width: 150,
                                                align: 'center',
                                                title: '流程文件名称'
                                            },
                                            {
                                                field: 'note',
                                                title: '备注',
                                                align: 'center'
                                            },
                                            {
                                                field: 'parentPath',
                                                align: 'center',
                                                title: '文件路径'
                                            },
                                            {
                                                field: 'fifileSize',
                                                align: 'center',
                                                title: '文件大小',
                                                width: 120
                                            },
                                            {
                                                field: 'createdTime',
                                                title: '创建时间',
                                                align: 'center',
                                                width: 120
                                            },
                                            {
                                                field: 'updateTime',
                                                title: '修改时间',
                                                align: 'center',
                                                width: 120
                                            },
                                            {
                                                field: 'path',
                                                title: '文件路径',
                                                align: 'center',
                                                hide: true,
                                                width: 120
                                            },
                                            {
                                                fixed: 'right',
                                                title: '操作',
                                                width: 200,
                                                align: 'center',
                                                toolbar: '#barhandle'
                                            }]],
                                        done: function (res) {
                                            if (res.isOperate != 1) {
                                                layui.$(".operateBtn").addClass("unoperate");
                                            }
                                            else {
                                                layui.$(".operateBtn").removeClass("unoperate");
                                            }
                                        }
                                    });
                                }
                            });

                        } else if (obj.event == 'detail') {
                            //查看事件
                            $ = layui.$;
                            //获取span的内容；
                            //var fileN = $(this).parent().parent().prev().html();
                            var fileN = $(this).parent().parent().prev().text();
                            openCfgFile(fileN);
                        } else if (obj.event == 'delfile') {
                            //删除文件事件
                            var filePath = layui.$(this).attr("data-path");
                            layer.confirm('确认要删除吗？', function (index) {
                                //发异步删除数据
                                layui.$.ajax({
                                    type: "post",
                                    url: localStorage.getItem('hosttingaddr') + "/Manager/ProcessCfgFile/delfile?fileName=" + filePath,
                                    headers: {
                                        user: getCookie("userinfo"),
                                        version: getCookie("version")
                                    },
                                    success: function (data) {
                                        layui.table.reload("processtab");
                                        layui.layer.close(index);

                                    }
                                });
                            });
                        }
                        else if (obj.event == 'downloadfile') {
                            //下载事件
                            var filePath = layui.$(this).attr("data-path");
                            var fileName = layui.$(this).attr("data-name");
                            var xhr = new XMLHttpRequest();
                            xhr.open("get", localStorage.getItem('hosttingaddr') + '/Manager/ProcessCfgFile/downloadfile?fileName=' + filePath, true);
                            xhr.responseType = "blob";
                            xhr.setRequestHeader("user", getCookie("userinfo"));
                            xhr.setRequestHeader("version", getCookie("version"));
                            xhr.onload = function (re) {
                                if (this.status == 200) {
                                    var blob = this.response;
                                    var reader = new FileReader();
                                    reader.readAsDataURL(blob);
                                    reader.onload = function (e) {
                                        var a = document.createElement('a');
                                        a.download = fileName;
                                        a.href = e.target.result;
                                        document.body.appendChild(a);
                                        a.click();
                                        document.body.removeChild(a);
                                    }
                                }
                            };
                            xhr.send();
                        }
                        else if (obj.event == 'delsource') {
                            //删除数据源文件夹
                            var filePath = layui.$(this).attr("data-path");
                            layer.confirm('确认要删除数据源吗？', function (index) {
                                //发异步删除数据
                                layui.$.ajax({
                                    type: "post",
                                    url: localStorage.getItem('hosttingaddr') + "/Manager/ProcessCfgFile/deldatasource?sourcepath=" + filePath,
                                    headers: {
                                        user: getCookie("userinfo"),
                                        version: getCookie("version")
                                    },
                                    success: function (data) {
                                        layui.table.reload("processtab");
                                        layui.layer.close(index);
                                        layer.msg(data.msg, { time: 1000 });
                                    }
                                });
                            });
                        }
                    });
                layui.form.on("submit(sreach)", function () {
                    var where = getWhere();
                    $tab.reload({
                        where: where,
                        page: { curr: 1 }
                    });
                    return false;
                });
                function collapseTable(options) {
                    var trObj = options.elem;
                    if (!trObj) return;
                    var accordion = options.accordion,
                        success = options.success,
                        content = options.content || '';
                    var tableView = trObj.parents('.layui-table-view'); //当前表格视图
                    var id = tableView.attr('lay-id'); //当前表格标识
                    var index = trObj.data('index'); //当前行索引
                    var leftTr = tableView.find('.layui-table-fixed.layui-table-fixed-l tr[data-index="' + index + '"]'); //左侧当前固定行
                    var rightTr = tableView.find('.layui-table-fixed.layui-table-fixed-r tr[data-index="' + index + '"]'); //右侧当前固定行
                    var colspan = trObj.find('td').length; //获取合并长度
                    var trObjChildren = trObj.next(); //展开行Dom
                    var indexChildren = id + '-' + index + '-children'; //展开行索引
                    var leftTrChildren = tableView.find('.layui-table-fixed.layui-table-fixed-l tr[data-index="' + indexChildren + '"]'); //左侧展开固定行
                    var rightTrChildren = tableView.find('.layui-table-fixed.layui-table-fixed-r tr[data-index="' + indexChildren + '"]'); //右侧展开固定行
                    var lw = leftTr.width() + 15; //左宽
                    var rw = rightTr.width() + 15; //右宽
                    //不存在就创建展开行
                    if (trObjChildren.data('index') != indexChildren) {
                        //装载HTML元素
                        var tr = '<tr data-index="' + indexChildren + '"><td colspan="' + colspan + '"><div style="height: auto;padding-left:' + lw + 'px;padding-right:' + rw + 'px" class="layui-table-cell">' + content + '</div></td></tr>';
                        trObjChildren = trObj.after(tr).next().hide(); //隐藏展开行
                        var fixTr = '<tr data-index="' + indexChildren + '"></tr>';//固定行
                        leftTrChildren = leftTr.after(fixTr).next().hide(); //左固定
                        rightTrChildren = rightTr.after(fixTr).next().hide(); //右固定
                    }
                    //展开|折叠箭头图标
                    trObj.find('td[lay-event="collapse"] i.layui-colla-icon').toggleClass("layui-icon-right layui-icon-down");
                    //显示|隐藏展开行
                    trObjChildren.toggle();
                    //开启手风琴折叠和折叠箭头
                    if (accordion) {
                        trObj.siblings().find('td[lay-event="collapse"] i.layui-colla-icon').removeClass("layui-icon-down").addClass("layui-icon-right");
                        trObjChildren.siblings('[data-index$="-children"]').hide(); //展开
                        rightTrChildren.siblings('[data-index$="-children"]').hide(); //左固定
                        leftTrChildren.siblings('[data-index$="-children"]').hide(); //右固定
                    }
                    success(trObjChildren, indexChildren); //回调函数
                    heightChildren = trObjChildren.height(); //展开高度固定
                    rightTrChildren.height(heightChildren + 115).toggle(); //左固定
                    leftTrChildren.height(heightChildren + 115).toggle(); //右固定
                }

            });


        // 设置筛选条件开始日期为日期控件
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#start' //指定元素
                , type: 'datetime'
            });
            laydate.render({
                elem: '#end' //指定元素
                , type: 'datetime'
            });
        });

        // 弹窗显示流程配置文件的内容
        function openCfgFile(fileN) {
            layer.open({
                type: 2,
                title: '流程配置文件内容',
                maxmin: true,
                shadeClose: true, //点击遮罩关闭层
                area: ['1200px', '520px'],
                content: 'processdetail.html?fileName=' + fileN// iframe链接地址
            });
        };

        // 添加流程配置文件
        function addProcessFile(obj) {
            var dirstr = getrequest().dir;
            layer.open({
                type: 2,
                title: '新增流程配置文件',
                maxmin: true,
                shadeClose: true,
                area: ['800px', '520px'],
                content: 'addfile.html?dir=' + dirstr// iframe链接地址
            });
        }

    </script>
</body>
</html>